<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/xlive/script/xlv.js"></script>
<title>xlive-rst</title>
</head>
<body >
	<div id="systemMain_main" xlvobject="xlv.obj.pane" >
       <div xlvobject="xlv.obj.fbApi" xlvprop="{appId2:'209447899065902',fbConnetion:'//connect.facebook.net/zh_TW/all.js'}" style="position:absolute;left:0px"
        	xlvmethod="{
        	   	fbInitial:function(){
        	   		FB.Canvas.setAutoResize(91);
        	   	},
        	   	login:function(){
        	   		if(this.$V.login) return;
        	   		this.$self('login');
        	   	},
        	  	loginResponse:function(resp){
        	   		this.$self('loginResponse',resp);
        	   		if(this.$V.login)this.queryData();
		    	}
		    }"
        				
       ></div>
       <div xlvobject="xlv.obj.channel"></div>
	
	<style>
		.styleNavi li				{list-style:none; float:left; display:inline-block; font-size:11px; margin:0; padding:0; line-height:100%; text-align:center; line-height:105px;color:#527190; text-decoration:none; display:inline-block; width:87px; height:65px; padding:0; margin:0; float:left; margin-left:-1px; cursor:pointer; font-family:Verdana;}
		#naviHome					{background:url(/xlive/images/rst/system_navi_1.png) no-repeat top left;}
		#naviHome:hover,
		#naviHome.selected		{background:url(/xlive/images/rst/system_navi_1.png) no-repeat bottom left; color:#FFF}
		#naviMenu				{background:url(/xlive/images/rst/system_navi_2.png) no-repeat top left;}
		#naviMenu:hover,
		#naviMenu.selected		{background:url(/xlive/images/rst/system_navi_2.png) no-repeat bottom left; color:#FFF;}
		#naviOrder					{background:url(/xlive/images/rst/system_navi_3.png) no-repeat top left;}
		#naviOrder:hover,
		#naviOrder.selected 		{background:url(/xlive/images/rst/system_navi_3.png) no-repeat bottom left; color:#FFF;}
		#naviReser					{background:url(/xlive/images/rst/system_navi_4.png) no-repeat top left;}
		#naviReser:hover,
		#naviReser.selected		{background:url(/xlive/images/rst/system_navi_4.png) no-repeat bottom left; color:#FFF}
		#naviStati					{background:url(/xlive/images/rst/system_navi_5.png) no-repeat top left;}
		#naviStati:hover,
		#naviStati.selected		{background:url(/xlive/images/rst/system_navi_5.png) no-repeat bottom left; color:#FFF;}
		#naviSystem					{background:url(/xlive/images/rst/system_navi_6.png) no-repeat top left;}
		#naviSystem:hover,
		#naviSystem.selected		{background:url(/xlive/images/rst/system_navi_6.png) no-repeat bottom left; color:#FFF;}
		#naviLogout 				{width:60px;float:right;}
		#naviLogout					{background:url(/xlive/images/rst/system_navi_7.png) no-repeat top left;}
		#naviLogout:hover			{background:url(/xlive/images/rst/system_navi_7.png) no-repeat bottom left;}
		
		#sys_navi {}
		#sys_viewport {position:relative;overflow:hidden;clear:both;}
		#sys_canvas {position:relative;float:left;}
		#sys_box  {position:relative;float:left;min-height:1px;}

	</style>
	<!-- <div style="width:1024px; margin:0 auto; padding:0; height:768px;">-->
	<div style="width:760px; margin:0 auto; padding:0;">
		<div id="system_control" xlvobject="xlv.obj.generic"
			xlvmethod="{
				initial:function(){
					this.$self('initial');
					this.addEventHandler('click','_click');
					var v=this.$V;
					v.sys_navi=xlv.util.findChild(this,{id:'sys_navi'},false,false);
					v.sys_viewport=xlv.util.findChild(this,{id:'sys_viewport'},false,false);
					v.sys_canvas=xlv.util.findChild(this,{id:'sys_canvas'},false,false);
					v.sys_boxes=xlv.util.children(this.$V.sys_canvas,{id:'sys_box'},false,false);
					var w=this.offsetWidth;
					v.sys_viewport.style.width=w+'px';
					v.sys_canvas.style.width=(w*v.sys_boxes.length+24)+'px';
					for(var i=0;i &lt; v.sys_boxes.length;++i) v.sys_boxes[i].style.width=w+'px';
				},
				_click:function(event){
					if(xlv.util.isDescendantOf(event.target,this.$V.sys_navi)){
						event.stop();
						if(this.$V.ajax_loading)return;
						var v=this.$V;
						var li=this.targetElement(event.target,{tag:'li'});
						Element.addClassName(li,'selected');
						var lis=xlv.util.siblings(li,{tag:'li'});
						for(var i=0;i &lt; lis.length;++i)Element.removeClassName(lis[i],'selected');
						var index=xlv.util.previousSiblings(li,{tag:'li'}).length;
						if(li.id=='naviLogout'){
							var session=FB.getSession();
							if(session)FB.ui({method: 'apprequests',message:'使用  xlive-rst 即時購物, 95 折, 讚'});
						}
						var ajax=xlv.util.findChild(v.sys_boxes[index],{'xlvobject':'xlv.obj.ajaxPane'},false,false);
						if(ajax &amp;&amp; !ajax.isLoaded()){
							this.$V.ajax_loading=true;
							ajax.loaded=function(){
								ajax.$self('loaded');
								this.slideBox(index);
								this.$V.ajax_loading=false;
							}.bind(this);
							ajax.request(ajax.$P.paneURL,ajax.$P.paneProperties,ajax.$P.paneMethod);						
						}else{
							this.slideBox(index);
						}
					}
				},
				slideBox:function(index){
					var toleft=this.$V.sys_boxes[index].offsetLeft;
					/*
					var sleft=this.$V.sys_viewport.scrollLeft;
					if(toleft>sleft) this.$V.sys_viewport.scrollLeft=this.$V.sys_boxes[index-1].offsetLeft
					else this.$V.sys_viewport.scrollLeft=this.$V.sys_boxes[index+1].offsetLeft;
					*/
					var option={element:this.$V.sys_viewport,properties:{},duration:300};
					option.properties.scrollLeft=toleft;
					xlv.util.styleEffect(option);
				}
			}"
		>
  			<div id="sys_navi" class="styleNavi" style="background:url(/xlive/images/rst/system_headerBg.png) repeat-x left top; height:65px; float:left; width:100%;">
            	<ul style="margin:0; padding:0">
                	<li id="naviHome" class="selected">Home</li>
                    <li id="naviMenu">Menu</li>
                    <li id="naviOrder">Order</li>
                    <li id="naviReser">Reservation</li>
                    <li id="naviStati">Statistic</li>
                    <li id="naviSystem">System</li>
                    <li id="naviLogout"></li>
                </ul>
        	</div>
        	<div id="sys_viewport">
        		<div id="sys_canvas">
        			<div id="sys_box">
        				<div xlvobject="xlv.obj.ximg" xlvprop="{src:'/xlive/images/rst/demo1.jpg'}" style="width:760px;height:580px"></div>
         			</div>
        			<div id="sys_box">
        				 <div xlvobject="xlv.obj.ajaxPane" xlvprop="{autoRequest:false,paneIn:'right', paneURL:'/xlive/menuMain.html'}" style="float:left"></div>
        				 <div style="clear:both;"></div>
        			</div>
        			<div id="sys_box">
        				 <div xlvobject="xlv.obj.ajaxPane" xlvprop="{autoRequest:false,paneIn:'right', paneURL:'/xlive/orderMain.html'}" style="float:left"></div>
        				 <div style="clear:both;"></div>
        			</div>
        			<div id="sys_box">
        				<div xlvobject="xlv.obj.ximg" xlvprop="{src:'/xlive/images/rst/demo3.bmp'}" style="width:760px;height:400px"></div>
        			</div>
        			<div id="sys_box">
        				<div style="width:760px;height:580px;background:url(/xlive/images/rst/menuBg.jpg) repeat-x left top;">
        				</div>
        			</div>
        			<div id="sys_box">
        				<div style="width:760px;height:580px;background:url(/xlive/images/rst/menuBgGreen.jpg) repeat-x left top;">
        				</div>
        			</div>
        			<div id="sys_box">
        				<div style="width:760px;height:580px;background:url(/xlive/images/rst/menuBg.jpg) repeat-x left top;">
        				</div>
        			</div>
        			<div style="clear:both;margin-bottom:16px"></div>
        		</div>
        	</div>
        	<!-- 
        	<div style="width:100%; float:left;">
        		<div xlvobject="xlv.obj.ajaxPane" xlvprop="{paneIn:'right', paneURL:'/xlive/menuMain.html'}" style="float:left"></div>
        	</div>
        	-->
        </div>
    </div>
	</div>
</body>
</html>
